<template>
  <div>
    <div class="mailTable" style="text-align: right"><el-button size="mini" @click="printMarketOrderPage">打印本页</el-button></div>

    <div class="page_main" ref="marketOrderRef">
    <div class="header">
      <div class="title">{{cuForm.type == 2 ? '市场下单表(换画)' : '市场下单表'}}</div>
      <div class="fill_date" v-loading="formLoading">填表日期：{{ cuForm.fill_date|formatDate }}</div>
    </div>
    <div class="content">
      <el-form ref="cuForm" v-loading="formLoading" :model="cuForm" :rules="rules" :disabled="formDisabled">
        <table class="mailTable">
          <tr class="firstTr">
            <td class="firstTd tip_td">
              <span class="tip">*</span>项目名称
            </td>
            <td class="column content_td">
              <el-form-item prop="customer_id">
                <el-select v-model="cuForm.customer_id" :disabled="is_update" style="width: 100%" filterable @change="customerChange">
                  <el-option v-for="item in customerArr" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
              </el-form-item>
            </td>
            <td class="tip_td">
              <span class="tip">*</span>客户合同名称
            </td>
            <td class="column content_td">
              <el-form-item prop="contract_id">
                <el-select v-model="cuForm.contract" :disabled="is_update" style="width: 100%" filterable value-key="id" @change="contractChange">
                  <el-tooltip v-for="(item,i) in contractArr" :key="item.id" placement="left">
                    <div slot="content">
                      <div>合同金额: {{ item.discounted_price + '元'}}</div>
                      <div v-if="item.contractMediaPriceList && item.contractMediaPriceList.length">
                        自营资源:
                      </div>
                      <div v-if="item.contractMediaPriceList && item.contractMediaPriceList.length"
                           v-for="(media,index) in item.contractMediaPriceList" :key="i+'_'+index+'_'+media.type">
                        |--{{ media.media_type_name + ':' + media.amount + '元' }}
                      </div>
                      <div v-if="item.contractMediaPriceProxyList && item.contractMediaPriceProxyList.length">
                        代理资源:
                      </div>
                      <div v-if="item.contractMediaPriceProxyList && item.contractMediaPriceProxyList.length"
                           v-for="(media,index) in item.contractMediaPriceProxyList" :key="i+'_'+index+'_'+media.type">
                        |--{{ media.media_type_name + ':' + media.amount + '元' }}
                      </div>
                    </div>
                    <el-option :value="item" :label="item.part_a+'——'+item.contract_num+'（'+item.contract_begin_date+' ~ '+item.contract_end_date+'）'"/>
                  </el-tooltip>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd tip_td"><span class="tip">*</span>公司名称</td>
            <td colspan="3" class="column">
              <el-form-item prop="dept_id">
                <el-select v-model="cuForm.dept_id" style="width: 100%" @change="companyChange">
                  <el-option v-for="item in companyArr" :key="item.id" :value="item.id" :label="item.head"/>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>关联销售单
            </td>
            <td colspan="3" class="column">
              <el-form-item prop="bill_sale_id">
                <el-select v-model="cuForm.bill_sale" style="width: 100%" placeholder="请选择销售单" filterable value-key="id" @change="billSaleChange">
                  <el-tooltip v-for="(item,i) in billSaleArr" :key="item.id" placement="left">
                    <div slot="content">
                      <div>执行金额: {{ item.execute_amount + '元'}}</div>
                      <div v-if="item.mediaDetailList && item.mediaDetailList.length">
                        自营资源:
                      </div>
                      <div v-if="item.mediaDetailList && item.mediaDetailList.length"
                           v-for="(media,index) in item.mediaDetailList" :key="i+'_'+index+'_'">
                        |--{{ media.media_type_name + ':' + media.amount + '元' }}
                      </div>
                      <div v-if="item.proxyMediaDetailList && item.proxyMediaDetailList.length">
                        代理资源:
                      </div>
                      <div v-if="item.proxyMediaDetailList && item.proxyMediaDetailList.length"
                           v-for="(media,index) in item.proxyMediaDetailList" :key="i+'_'+index+'_'">
                        |--{{ media.proxy_media_type + ':' + media.proxy_amount + '元' }}
                      </div>
                    </div>
                    <el-option :key="item.id" :value="item"
                               :label="'ID:'+ item.id +'【' + item.deptName + '——' + item.customerName + '】' + item.contract_num">
                    </el-option>
                  </el-tooltip>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              <span class="tip">*</span>设计人员
            </td>
            <td colspan="3" class="column">
              <el-form-item prop="design_user_id">
                <el-select v-model="cuForm.design_user_id" style="width: 100%" placeholder="请选择设计人员" clearable filterable>
                  <el-option v-for="designer in designerArr" :value="designer.id" :label="designer.name" :key="designer.id"></el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd colum tip_td">备注</td>
            <td colspan="3" class="column" style="padding: 10px 20px">
              <el-input v-model="cuForm.memo" type="textarea" :rows="4"></el-input>
            </td>
          </tr>
          </table>

          <table class="mailTable">
          <tr class="firstTr">
            <td class="column" colspan="4" style="text-align: left;padding: 0;">
              <div style="max-width: 100%;overflow: auto">
                <el-table :header-row-style="{'line-height':'38px'}" class="fill_table" :data="mediaDetailList" stripe border style="width: 100%;">
                  <el-table-column label="媒体类型" align="center">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-select v-model="scope.row.media_type_id" size="mini" placeholder="请选择媒体类型" disabled="true">
                          <el-option v-for="item in mediaTypeArr" :key="item.id" :value="item.id" :label="item.name"/>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格" align="center">
                    <template slot-scope="scope">
                      <el-form-item style="margin: 18px 0">
                        <el-select v-model="scope.row.media_type_spec_id" size="mini" placeholder="请选择规格" disabled="true">
                          <el-option v-for="(item,index) in scope.row.media_type_spec_arr" :key="index" :value="item" :label="item"/>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column label="执行时间" align="center"  width="380px">
                    <template slot-scope="scope">
                      <el-date-picker v-model="scope.row.duration" type="daterange" size="mini" range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期"
                                                    value-format="yyyy-MM-dd"
                                                    format="yyyy年MM月dd日"
                                                    :clearable="false"
                                                    style="width: 100%;"
                                                    disabled="true"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="合同数量" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.contract_quantity" size="mini" placeholder="请输入数量" disabled="true"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="累计执行数" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.total_executed_quantity" size="mini" placeholder="请输入数量" disabled="true"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="执行数量" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.quantity" size="mini" placeholder="请输入数量" disabled="true"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="关联点位" align="center" >
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.intention_scheme" style="width: 100%" filterable
                                   value-key="id" @change="(val)=>{planChange(val,scope.$index,true)}">
                          <el-option v-for="item in planArr" :key="item.id" :value="item"
                                     :label="item.plan_name"/>
                        </el-select>
                      </template>
                  </el-table-column>
                  <el-table-column label="工单生成" align="center" v-if="!is_created">
                    <template slot-scope="scope">
                      <span v-if="scope.row.market_status == 1">已生成</span>
                      <span v-else-if="scope.row.market_status == 0"><el-button type="primary"  size="small" plain>生成</el-button></span>
                      <span v-else>未生成</span>
                    </template>
                  </el-table-column>
                  <el-table-column v-show="false" v-if="!formDisabled" width="50" align="center">
                    <template slot="header">
                      <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline" @click="selfMediaAdd"/>
                    </template>
                    <template slot-scope="scope">
                      <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                         @click="selfMediaDeleteByIndex(scope.$index)"/>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </td>
          </tr>
          </table>
          <table class="mailTable">
          <tr class="firstTr"><td class="firstTd column" colspan="4" style="text-align: left;padding: 0;">
          <el-tabs type="border-card">
            <el-tab-pane :key="index" v-for="(item, index) in mediaDetailList" :data-index="index"
                         :label="mediaTypeNameArr[item.media_type_id]+'【' + item.media_type_spec_id+'】'+'【' + item.execute_time_start+' 至 '+item.execute_time_end+'】'" @tab-click="tabClick">
                <table class="mailTable">
                    <tr>
                      <td class="firstTd column tip_td">
                        <span class="tip">*</span>点位详情
                      </td>
                      <td colspan="3" class="column">
                        <div style="margin-bottom: 20px">
                          <el-form>
                            <point-config v-if="item.intention_scheme_id > 0" :data="item.configData" :read-only="true" :tip-show="false"></point-config>
                          </el-form>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="firstTd column tip_td">
                        <span class="tip">*</span>最晚上刊时间
                      </td>
                      <td class="column">
                        <el-form-item class="el-form-item_inline-block">
                          <el-date-picker
                            v-model="mediaDetailList[index].latest_up_date"
                            type="date"
                            style="width: 180px"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd"
                            placeholder="最晚上刊时间"/>
                        </el-form-item>
                        <el-form-item class="el-form-item_inline-block">
                          <el-select style="width: 150px" v-model="mediaDetailList[index].latest_up_time" placeholder="请选择上下午" clearable>
                            <el-option label="上午" :value="1"/>
                            <el-option label="下午" :value="2"/>
                          </el-select>
                        </el-form-item>
                      </td>
                      <td class="column tip_td">
                        <span class="tip">*</span>最晚下刊时间
                      </td>
                      <td class="column">
                        <el-form-item class="el-form-item_inline-block">
                          <el-date-picker
                            v-model="item.latest_down_date"
                            type="date"
                            style="width: 180px"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd"
                            placeholder="最晚下刊时间"
                          />
                        </el-form-item>
                        <el-form-item class="el-form-item_inline-block">
                          <el-select style="width: 150px" v-model="item.latest_down_time" placeholder="请选择上下午" clearable>
                            <el-option label="上午" :value="1"/>
                            <el-option label="下午" :value="2"/>
                          </el-select>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td class="firstTd column tip_td">
                        <span class="tip">*</span>是否有新画面
                      </td>
                      <td class="column">
                        <el-form-item>
                          <el-radio-group v-model="item.has_new_pic">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </td>
                      <td class="column tip_td">
                        <span class="tip">*</span>是否需要小样
                      </td>
                      <td class="column">
                        <el-form-item>
                          <el-radio-group v-model="item.need_sample">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td class="firstTd column tip_td">
                        <span class="tip">*</span>画面是否回收
                      </td>
                      <td class="column">
                        <el-form-item>
                          <el-radio-group v-model="item.pic_need_recycle">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </td>
                      <td class="column tip_td">
                        <span class="tip">*</span>是否显示代理资源标识
                      </td>
                      <td class="column">
                        <el-form-item>
                          <el-radio-group v-model="item.show_proxy_flag">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td class="firstTd colum tip_td">
                        <span class="tip">*</span>拍照要求
                      </td>
                      <td colspan="3" class="column">
                        <i style="font-size: 20px;float:left; width: 30px;height: 30px;color:#409EFF;margin-top: 10px"
                           class="el-icon-circle-plus-outline" @click="addShootRequirement(index)"
                           v-show="item.bill_sale_id != null && !formDisabled"></i>
                        <div style="clear: both"></div>
                        <div>
                          <table class="photoRequirementTable" style="width: 100%;margin-bottom: 10px">
                            <tr class="firstTr table-herder">
                              <td class="firstTd column" style="width: 5%">动作</td>
                              <td class="column" style="width: 5%">照片</td>
                              <td class="column" style="width: 5%">近景</td>
                              <td class="column" style="width: 5%">远景</td>
                              <td class="column" style="width: 10%">时间</td>
                              <td class="column" style="width: 20%">具体要求</td>
                              <td class="column" style="width: 25%">备注</td>
                              <td v-show="!formDisabled" class="column" style="width: 10%">操作</td>
                            </tr>
                            <template v-if="item.shootRequirementList.length >0"
                                      v-for="(temp,idx) in item.shootRequirementList">
                                <tr :key="idx">
                                  <td class="column">
                                    {{ temp.shoot_type === 1 ? '上刊' : temp.shoot_type === 2 ? '下刊' : '中间监播' }}
                                  </td>
                                  <td class="column">
                                    <el-button v-show="!formDisabled" style="line-height: 100%;margin-left: 10px" type="text"
                                               @click="addPhotoRequirement()">新增
                                    </el-button>
                                  </td>
                                  <td class="column">
                                    {{ temp.close_shoot_num ? temp.close_shoot_num : 0 }}
                                  </td>
                                  <td class="column">
                                    {{ temp.far_shoot_num ? temp.far_shoot_num : 0 }}
                                  </td>
                                  <td class="column">{{ temp.shoot_date }}</td>
                                  <td class="column" style="font-size: 12px">
                                    <div>
                                      {{ temp.baidu_time ? '有百度时间' : '' }}
                                      {{ temp.watermark_time ? '有水印时间' : '' }}
                                      {{ temp.newspaper_time ? '有报纸时间' : '' }}
                                    </div>
                                    <div>
                                      {{ temp.normal_shoot ? '正常拍摄' : '' }}
                                      {{ temp.background_clear ? '背景清晰' : '' }}
                                      {{ temp.newpaper_clear ? '报纸清晰' : '' }}
                                    </div>
                                  </td>
                                  <td class="column" style="font-size: 12px;text-align: left">
                                    {{ temp.memo }}
                                  </td>
                                  <td v-show="!formDisabled" class="column">
                                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(temp,idx)"></el-button>
                                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeData(idx)"></el-button>
                                  </td>
                                </tr>
                            </template>
                          </table>
                        </div>
                      </td>
                    </tr>
                  </table>
            </el-tab-pane>
          </el-tabs>
          </td>
          </tr>
          </table>
      </el-form>
    </div>
    <FlowBtnRow style="margin-bottom: 20px" :is-new-data="params.is_create"
                :is-applyer="cuForm.flow_applyer_id == userId"
                :flow-status="cuForm.flow_status" :can-check="cuForm.can_check"
                @save="save" @submit="submit" @pass="pass" @returnBack="returnBack" @delete="remove"
                @actualDelete="actualDelete" form-name="cuForm" :flowType="20"
                :dataId="(params || {}).id || ((params || {}).handle_param || {}).id"
    ></FlowBtnRow>

    <el-dialog :title="dialogEdit?'修改拍照要求':'新增拍照要求'" :visible.sync="centerDialogVisible" width="50%" center @close="closeDialog">
      <div style="margin-top: 10px">
        <el-form ref="photoRequirementsForm" :model="photoRequirementsData" size="mini"
                 label-width="100px" :rules="photoRequirementsFormRules">
          <el-card shadow="always">
            <el-row>
              <el-col :span="24">
                <el-form-item label="通用拍照要求">
                  <el-select v-model="common_shoot_id" :disabled="dialogEdit" style="width: 100%" filterable @change="commonShootChange">
                    <el-option v-for="item in commonShootRequirements" :key="item.id" :value="item.id" :label="item.name"/>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="时间" prop="shoot_date">
                  <el-date-picker
                    v-model="photoRequirementsData.shoot_date"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    format="yyyy年MM月dd日"
                    style="width: 200px"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型" prop="shoot_type">
                  <el-select v-model="photoRequirementsData.shoot_type" style="width: 200px" clearable placeholder="请选择类型" :disabled="dialogEdit">
                    <el-option label="上刊" :value="1"></el-option>
                    <el-option label="下刊" :value="2"></el-option>
                    <el-option label="中间监播" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="近景">
                  <el-input v-model="photoRequirementsData.close_shoot_num" step="0.01" type="number"
                            style="width: 200px">
                    <template slot="append">张</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="远景">
                  <el-input v-model="photoRequirementsData.far_shoot_num" step="0.01" type="number"
                            style="width: 200px">
                    <template slot="append">张</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="百度时间">
                  <el-checkbox v-model="photoRequirementsData.baidu_time"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="水印时间">
                  <el-checkbox v-model="photoRequirementsData.watermark_time"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报纸时间">
                  <el-checkbox v-model="photoRequirementsData.newspaper_time"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="正常拍摄">
                  <el-checkbox v-model="photoRequirementsData.normal_shoot"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="背景清晰">
                  <el-checkbox v-model="photoRequirementsData.background_clear"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报纸清晰">
                  <el-checkbox v-model="photoRequirementsData.newpaper_clear"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input autosize v-model="photoRequirementsData.memo" type="textarea" placeholder="请输入备注"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="savePhotoRequirementsConfig">保 存</el-button>
      </span>
    </el-dialog>
  </div>

  </div>
</template>

<script>
import { formatDate, formatDateByFmt } from '@/utils/util'
import PointConfig from '@/components/PointPlanSetting/pointConfig'
import FlowBtnRow from '@/components/FlowBtnRow'
import { company_list_all, list_all } from '@/api/customer/customer'
import { get_company } from '@/api/system/department'
import { cloneDeep, parseInt } from 'lodash'
import { list_media_types } from '@/api/building/building'
import { listByCustomerId } from '@/api/contract'
import { detail, list_for_market_by_contract_id, listLatestSaleBill, detailNew as saleBillDetail } from '@/api/saleOrder'
import { formatData } from '@/views/business/contract/util'
import { list_by_role_code } from '@/api/system/user'
import { actual_delete,
  begin, detail as marketDetail,
  pass, remove, return_back, save,
  detailNew as marketDetailNew, beginNew, saveNew,
  initMarketBill, subDetail, initNewMarketBill} from '@/api/merketOrder'
import { detail as planDetail, listByRelated } from '@/api/business/intention_scheme'
import html2canvas from "html2canvas"
import printJS from "print-js"
import { listAll } from "@/api/shootRequirement"

export default {
  name: 'Detail',
  components: { FlowBtnRow, PointConfig },
  filters: {
    formatDate(time) {
      if (time) {
        return formatDateByFmt(time, 'yyyy年MM月dd日')
      }
    }
  },
  data() {
    return {
      is_created: false,
      is_update: false,
      formLoading: false,
      params: {},
      mediaTypeArr: [],
      mediaTypeNameArr: [],
      companyArr: [],
      customerArr: [],
      contractArr: [],
      billSaleArr: [],
      designerArr: [],//设计人员
      planArr: [],
      // 自身媒体资源明细
      mediaDetailList: [
        {
          bill_sale_detail_id: null,
          media_type_id: null,
          media_type_spec_arr: [],
          media_type_spec_id: null,
          duration: null,
          execute_time_start: null,
          execute_time_end: null,
          contract_quantity: null,
          quantity: null,
          total_executed_quantity: null,
          price: null,
          amount: null,
          is_market: 0,
          choose_id: null,
          intention_scheme: null,
          intention_scheme_id: null,
          daterange_id: null,
          configData: []
        }
      ],
      defaultMarketBillDetail: {
        latest_up_date: null,
        latest_up_time: 2,
        latest_down_date: null,
        latest_down_time: 2,
        need_sample: true,
        has_new_pic: true,
        show_proxy_flag: false,
        pic_need_recycle: true,
      },
      cuForm: {
        editableTabsValue:[],
        fill_date: formatDate(new Date()),
        type: 1,
        dept_id: null,
        customer_id: null,
        contract_id: null,
        bill_sale: null,
        bill_sale_id: null,
        design_user_id: null,
        memo: null,
        billMarketDetailList: [
          {
            bill_sale_id: null,
            bill_sale_detail_id: null,
            need_sample: null,
            latest_up_date: null,
            latest_up_time: null,
            latest_down_date: null,
            latest_down_time: null,
            first_time: null,
            has_new_pic: null,
            show_proxy_flag: null,
            pic_need_recycle: null,
            shootRequirementList: [
              {
                shoot_type: null,
                shoot_date: null,
                baidu_time: null,
                watermark_time: null,
                newspaper_time: null,
                normal_shoot: null,
                background_clear: null,
                newpaper_clear: null,
                close_shoot_num: null,
                far_shoot_num: null,
                memo: null
              }
            ]
          }
        ]
      },
      tabIndex: 1,//TAB 下标
      index: null,// tab下的拍照要求index
      tmpData: [],
      point_type_arr: [],
      centerDialogVisible: false,
      dialogEdit: false,
      tmpArr: [],
      tempArr: [],
      photoRequirementsDataArr: [],
      mustIncludeBillSaleId: null,
      photoRequirementsData: {
        shoot_type: null,
        shoot_date: null,
        baidu_time: null,
        watermark_time: null,
        newspaper_time: null,
        normal_shoot: null,
        background_clear: null,
        newpaper_clear: null,
        close_shoot_num: null,
        far_shoot_num: null,
        memo: null
      },
      commonShootRequirements: null,
      common_shoot_id: null,
      rules: {
        dept_id: [
          { required: true, message: '请选择公司', trigger: 'change' }
        ],
        bill_sale_id: [
          { required: true, message: '请选择销售单', trigger: 'change' }
        ],
        design_user_id: [
          { required: true, message: '请选择设计人员', trigger: 'change' }
        ]
      },
      billMarketDetailRules:{
        need_sample: [
          { required: true, message: '请选择是否需要小样', trigger: 'change' }
        ],
        latest_up_date: [
          { required: true, message: '请选择最晚上刊日期', trigger: 'change' }
        ],
        latest_up_time: [
          { required: true, message: '请选择上下午', trigger: 'change' }
        ],
        latest_down_date: [
          { required: true, message: '请选择最晚下刊日期', trigger: 'change' }
        ],
        latest_down_time: [
          { required: true, message: '请选择上下午', trigger: 'change' }
        ],
        first_time: [
          { required: true, message: '请选择是否第一次上画', trigger: 'change' }
        ],
        has_new_pic: [
          { required: true, message: '请选择是否有新画面', trigger: 'change' }
        ],
        show_proxy_flag: [
          { required: true, message: '请选择是否显示代理资源标识', trigger: 'change' }
        ],
        pic_need_recycle: [
          { required: true, message: '请选择画面是否需要回收', trigger: 'change' }
        ]
      },
      photoRequirementsFormRules: {
        shoot_type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        shoot_date: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
      tmpTypeId: null
    }
  },
  computed: {
    userId() { return this.$store.state.user.id },
    formDisabled() {
      return this.cuForm.flow_status == 3 || this.cuForm.flow_status == 4
    }
  },
  watch: {
    mediaDetailList: {
      handler(mediaDetailList) {
        console.log('WT',mediaDetailList)
      },
      deep: true
    }
  },
  async created() {
    const uuid = this.$route.query.uuid
    const params = this.$store.state.keep.pageParamsMap.get(uuid)

    console.log('params',params)

    this.params = params
    //初始化通用拍照要求
    this.initCommonRequirements()
    // 1、先初始化项目客户
    this.initCustomerArr(true)
    // 2、初始化公司
    this.initCompanyArr()
    // 3、初始化设计人员
    this.initDesignerList()
    // 4、初始化媒体类型
    this.initMediaTypeArr()
    if (params){
      // 判断是否是新建时市场单页面
      if (params.is_create == true) {
        this.is_created = true
        // 从销售单直接带过来数据创建市场单
        if (params.hasOwnProperty('bill_sale_id') && params.bill_sale_id !== undefined) {
          this.cuForm.bill_sale_id = params.bill_sale_id
          // if (params.must_include_bill_sale_id !== undefined){
          //   this.mustIncludeBillSaleId = params.must_include_bill_sale_id;
          // }
          let query = {}
          query.bill_sale_id = params.bill_sale_id
          if (params.hasOwnProperty('bill_sale_detail_id') && params.bill_sale_detail_id != undefined){
            query.bill_sale_detail_id = params.bill_sale_detail_id
          }
          // 初始化市场单
          await initNewMarketBill(query).then(res => {
            this.formLoading = false
            this.cuForm = res.data
            // 市场单对应销售单里的媒体数据
            this.mustIncludeBillSaleId = this.cuForm.bill_sale_id
            listByCustomerId({ customerId: this.cuForm.customer_id }).then(res => {
              this.contractArr = res.data
              this.cuForm.contract = this.contractArr.find(item => item.id === this.cuForm.contract_id)
            })
            // 根据部门ID选中公司
            this.companyChange(this.cuForm.dept_id)
            // 通过当前市场单customer_id触发customer选择
            this.billSaleChange(this.cuForm.bill_sale_id, true)
          })
        }
      }
      if (params.is_update) {
        this.is_update = true
      }
      if (params.type) {
        this.cuForm.type = params.type
      }
      // 编辑页或者详情页 处理逻辑
      if (params.id || params.handle_param) {
        let id = null
        if (params.id) {
          id = params.id
        } else {
          id = params.handle_param.id
        }
        this.formLoading = true
        await marketDetailNew({ id }).then(res => {
          this.formLoading = false
          this.cuForm = res.data
          // 市场单对应销售单里的媒体数据
          this.mediaDetailList = res.data.billMarketDetailList
          this.mustIncludeBillSaleId = this.cuForm.bill_sale_id
          listByCustomerId({ customerId: this.cuForm.customer_id }).then(res => {
            this.contractArr = res.data
            this.cuForm.contract = this.contractArr.find(item => item.id === this.cuForm.contract_id)
          })
          this.companyChange(this.cuForm.dept_id)
          // 通过当前市场单customer_id触发customer选择
          this.initPlanList(this.cuForm.contract_id,id)
        })
      }
      // 从销售单详情点击《已生成》进入
      if (params.mid) {
        let mid = params.mid
        this.formLoading = true
        await subDetail({ marketDetailId: mid }).then(res => {
          this.formLoading = false
          this.cuForm = res.data
          // 市场单对应销售单里的媒体数据
          this.mediaDetailList = res.data.billMarketDetailList
          this.mustIncludeBillSaleId = this.cuForm.bill_sale_id
          listByCustomerId({ customerId: this.cuForm.customer_id }).then(res => {
            this.contractArr = res.data
            this.cuForm.contract = this.contractArr.find(item => item.id === this.cuForm.contract_id)
          })
          this.companyChange(this.cuForm.dept_id)
          // 通过当前市场单customer_id触发customer选择
          this.initPlanList(this.cuForm.contract_id,0)
        })
      }
    }
  },
  mounted() {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
    })
  },
  methods: {
    initCommonRequirements(){
      listAll().then(res => {
        this.commonShootRequirements = res.data
      })
    },
    commonShootChange(val){
      console.log('shoot',val)
      let cur = this.commonShootRequirements.filter(item => item.id == val)
      if (cur){
        console.log('cur', cur)
        this.photoRequirementsData = Object.assign(this.photoRequirementsData, cur[0])
      }
    },
    printMarketOrderPage(){
      html2canvas(this.$refs.marketOrderRef,{
        backgroundColor: 'white',
        useCORS: true,
        foreignObjectRendering: false,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        const url = canvas.toDataURL()
        printJS({
          printable: url,
          type:'image',
          documentTitle: '测试',
          base64: true
        })
      })
    },
    tabClick(tab,event){
      console.log(tab, event);
    },
    // 初始化客户列表
    initCustomerArr(flag = false) {
      if (flag) {
        list_all().then(res => {
          this.customerArr = res.data
        })
      } else {
        company_list_all().then(res => {
          this.customerArr = res.data
        })
      }
    },
    // 客户选择框改变
    customerChange(id) {
      this.clearContractId()
      listByCustomerId({ customerId: id }).then(res => {
        this.contractArr = res.data
        this.cuForm.contract = this.contractArr.find(item => item.id === this.cuForm.contract_id)
      })
    },
    // 清空合同
    clearContractId() {
      this.contractArr = []
      this.cuForm.contract = null
      this.cuForm.contract_id = null
      this.cuForm.contract_num = null
    },
    // 合同客户名称change事件
    contractChange(data) {
      // 确定操作
      this.cuForm.dept_id = data.part_b_id
      this.cuForm.contract_id = data.id
      this.companyChange(data.part_b_id)
    },
    // 初始化子公司数组
    initCompanyArr() {
      get_company().then(res => {
        this.companyArr = res.data
      })
    },

    // 选择公司change事件
    companyChange(val){
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      listLatestSaleBill({
        deptId: val,
        contractId: this.cuForm.contract_id,
        mustIncludeBillSaleId: this.mustIncludeBillSaleId,
        type: this.cuForm.type
      }).then(res => {
        this.billSaleArr = res.data
        this.cuForm.bill_sale = this.billSaleArr.find(item => item.id === this.cuForm.bill_sale_id)
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    // 选择关联销售单change事件
    billSaleChange(billSale) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.cuForm.bill_sale_id = (typeof billSale == 'object') ? billSale.id : billSale;
      saleBillDetail({ id: this.cuForm.bill_sale_id }).then(res => {
        this.formLoading = false
        let initMediaDetailList = res.data.mediaDetailList
        // 市场单新建的情况下，需要初始化上下刊信息以及拍照要求
        if (this.is_created) {
          initMediaDetailList.forEach((item,index) => {
            let defDetail = {...this.defaultMarketBillDetail}
            if (item.execute_time_start){
              const latest_up_date = new Date(item.execute_time_start)
              latest_up_date.setDate(latest_up_date.getDate() + 1)
              defDetail.latest_up_date = new Date(latest_up_date).Format("yyyy-MM-dd")
            }
            if (item.execute_time_end){
              const latest_down_date = new Date(item.execute_time_end)
              latest_down_date.setDate(latest_down_date.getDate() + 1)
              defDetail.latest_down_date = new Date(latest_down_date).Format("yyyy-MM-dd")
            }

            let defShotUp = {...this.photoRequirementsData}
            defShotUp.shoot_type = 1
            defShotUp.shoot_date = item.execute_time_start
            defShotUp.close_shoot_num = 1

            let defShotDown = {...this.photoRequirementsData}
            defShotDown.shoot_type = 2
            defShotDown.shoot_date = item.execute_time_end
            defShotDown.close_shoot_num = 1
            // 默认拍照要求
            let shootRequirementList = []
            shootRequirementList.push(defShotUp)
            shootRequirementList.push(defShotDown)

            //this.$set(this.mediaDetailList[index],'shootRequirementList',shootRequirementList)

            // item.shootRequirementList = []
            // item.shootRequirementList.push(defShotUp)
            // item.shootRequirementList.push(defShotDown)

            // this.$set(defDetail,'shootRequirementList',shootRequirementList)
            // defDetail.shootRequirementList = shootRequirementList
            Object.assign(item, defDetail)
          })
        }
        this.mediaDetailList = initMediaDetailList
        console.log("SBD",this.mediaDetailList)
        this.initPlanList(res.data.contract_id,0)
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    // 初始化媒体类型
    initMediaTypeArr() {
      list_media_types().then(
        res => {
          this.mediaTypeArr = res.data
          this.mediaTypeArr.forEach(item => {
            this.mediaTypeNameArr[item.id] = item.name
          })
        }
      )
    },
    initDesignerList() {
      list_by_role_code({ code: 'Design' }).then(res => {
        this.designerArr = res.data
      })
    },
    // 选择媒体类型 CHANGE 事件
    mediaTypeChange(index, mediaTypeId) {
      this.mediaTypeArr.map(item => {
      	if(item.id === mediaTypeId){
      		this.mediaDetailList[index].media_type_spec_arr = item.name
        }
      })
    },
    // 执行时间 change 事件
    executeTimeChange(val,index){
      if (val){
        this.mediaDetailList[index].execute_time_start = val[0]
        this.mediaDetailList[index].execute_time_end = val[1]
      }
    },
    // 初始化锁点
    initPlanList(related_id,bill_market_id = null) {
       listByRelated({
        related_id: related_id,
        related_type: 1,
        bill_market_id: bill_market_id == null ? 0 : bill_market_id,
        must_include_id: this.cuForm.contract_id === this.source_contract_id ? this.must_include_id : null,
        type: this.cuForm.type
      }).then(res => {
        this.planArr = res.data
        if (this.planArr && this.mediaDetailList && this.mediaDetailList.length > 0){
          this.mediaDetailList.map((item,index) => {
            if (item.intention_scheme_id){
              item.intention_scheme = this.planArr.find(plan => plan.id === item.intention_scheme_id)
              planDetail({ id: item.intention_scheme_id }).then(rs => {
                item.configData = formatData(rs)
                this.$set(this.mediaDetailList, index, item);
              }).catch(() => {
              })
            }
          })
        }
      })
    },
    // 锁位关联触发
    async planChange(data, index, flag = false) {
      this.mediaDetailList[index].intention_scheme = data
      this.mediaDetailList[index].choose_id = data.choose_id
      this.mediaDetailList[index].intention_scheme_id = data.id
      this.mediaDetailList[index].daterange_id = data.daterange_id
      this.mediaDetailList[index].actual_execute_time_start = data.daterange_start_at
      this.mediaDetailList[index].actual_execute_time_end = data.daterange_end_at
      let loading
      if (flag) {
        loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }
      await planDetail({ id: data.id }).then(res => {
        this.$set(this.mediaDetailList[index], 'configData', formatData(res));
      }).catch(() => {})
      loading.close();
    },
    clearPlanId() {
      this.planArr = []
    },
    addPhotoRequirement(arr, type, list) {
      this.centerDialogVisible = true
      if (type) {
        this.photoRequirementsData.shoot_type = type
        this.tmpTypeId = type
      }
      this.tempArr = list
      this.tmpArr = arr || []
    },
    addShootRequirement(index) {
      this.centerDialogVisible = true
      this.tabIndex = index
    },
    savePhotoRequirementsConfig(){
      this.$refs.photoRequirementsForm.validate(flag => {
        if (flag) {
          this.centerDialogVisible = false
          if (this.dialogEdit) {
            this.mediaDetailList[this.tabIndex].shootRequirementList.splice(this.index, 1, this.photoRequirementsData)
          } else {
            if (this.mediaDetailList[this.tabIndex].shootRequirementList && this.mediaDetailList[this.tabIndex].shootRequirementList.length > 0){
              this.mediaDetailList[this.tabIndex].shootRequirementList.push(this.photoRequirementsData)
            } else {
              this.mediaDetailList[this.tabIndex].shootRequirementList = []
              this.mediaDetailList[this.tabIndex].shootRequirementList.push(this.photoRequirementsData)
            }
          }
        }
      })
    },
    savePhotoRequirementsConfigBak() {
      this.$refs.photoRequirementsForm.validate(flag => {
        if (flag) {
          this.centerDialogVisible = false
          if (this.dialogEdit) {
            this.mediaDetailList[this.tabIndex].shootRequirementList.splice(this.index, 1, this.photoRequirementsData)
            //this.tmpArr.splice(this.index, 1, this.photoRequirementsData)
          } else {
            if (this.tmpArr.length === 0) {
              let data = {
                media_type_id: null,
                arr: []
              }
              let tmp = {
                shoot_type: this.photoRequirementsData.shoot_type,
                arr: []
              }
              tmp.arr.push(this.photoRequirementsData)
              data.arr.push(tmp)
              this.photoRequirementsDataArr.push(data)
            } else {
              if (this.photoRequirementsData.shoot_type === this.tmpTypeId) {
                this.tmpArr.push(this.photoRequirementsData)
              } else {
                const find = this.tempArr.find(item => item.shoot_type === this.photoRequirementsData.shoot_type)
                if (find) {
                  find.arr.push(this.photoRequirementsData)
                } else {
                  let tmp = {
                    shoot_type: this.photoRequirementsData.shoot_type,
                    arr: []
                  }
                  tmp.arr.push(this.photoRequirementsData)
                  this.tempArr.push(tmp)
                }
              }
            }
          }
          console.log(this.photoRequirementsDataArr)
        }
      })
    },
    closeDialog() {
      this.dialogEdit = false
      this.index = -1
      this.tmpArr = []
      this.tempArr = []
      this.tmpTypeId = null
      this.photoRequirementsData = {
        shoot_type: null,
        shoot_date: null,
        baidu_time: null,
        watermark_time: null,
        newspaper_time: null,
        normal_shoot: null,
        background_clear: null,
        newpaper_clear: null,
        close_shoot_num: null,
        far_shoot_num: null
      }
      this.$nextTick(() => {
        this.$refs.photoRequirementsForm.clearValidate()
      })
    },
    getAllCount(arr) {
      let count = 0
      arr.forEach(item => {
        if (!isNaN(parseInt(item.close_shoot_num))) {
          count += parseInt(item.close_shoot_num)
        }
        if (!isNaN(parseInt(item.far_shoot_num))) {
          count += parseInt(item.far_shoot_num)
        }
      })
      return count
    },
    edit(data, index, arr) {
      this.dialogEdit = true
      this.index = index
      this.photoRequirementsData = Object.assign({}, data)
      this.tmpArr = arr
      this.centerDialogVisible = true
    },
    removeData(j, arr_level3, i, arr_level2, index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        arr_level3.splice(j, 1)
        if (arr_level3.length === 0) {
          // 如果三级数组没有为空 删除所处的值
          arr_level2.splice(i, 1)
          // 如果二级数组没有为空 删除所处的值
          if (arr_level2.length === 0) {
            this.photoRequirementsDataArr.splice(index, 1)
          }
        }
      }).catch(() => {
      })
    },
    getOptionDisable(val, index) {
      if (val !== -1) {
        // 如果其他的拍照要求包含了此选项 则禁用此选项 或者其他的拍照要求包含的全部 禁用此选项
        let flag = false
        for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
          if (i !== index) {
            const obj = this.photoRequirementsDataArr[i]
            if (obj.media_type_id === val || obj.media_type_id === -1) {
              flag = true
            }
          }
        }
        return flag
      } else {
        for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
          if (i !== index) {
            const obj = this.photoRequirementsDataArr[i]
            if (obj.media_type_id !== null) {
              return true
            }
          }
        }
        return false
      }
    },
    addDisable() {
      let arr = []
      for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
        const obj = this.photoRequirementsDataArr[i]
        if (obj.media_type_id === -1) {
          return true
        } else if (obj.media_type_id !== null && obj.media_type_id != '') {
          arr.push(obj.media_type_id)
        }
      }
      if (arr.length + 1 >= this.mediaSettingType.length) {
        return true
      } else {
        return false
      }
    },
    checkData() {
      //检查提交数据
      if (this.mediaDetailList.length > 0){
        let shoot = 0;
        let is = 0;
        this.mediaDetailList.forEach(item => {
          if (!item.hasOwnProperty('shootRequirementList') || item.shootRequirementList.length === 0){
            shoot += 1;
          }
          // 判断锁位是否已经选择
          if (!item.hasOwnProperty('intention_scheme') || item.intention_scheme_id == null){
            is += 1;
          }
        })
        if (shoot > 0){
          this.$message.error('每个市场单最少有一项拍照要求...')
          return false
        }
        if (is > 0){
          this.$message.error('每个市场单需要先选择关联点位...')
          return false
        }
        return true
      }else {
        this.$message.error('每个市场单至少有一个媒体资源...')
        return false;
      }
    },
    save() {
      const flag = this.checkData()
      if (flag) {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.cuForm.billMarketDetailList = this.mediaDetailList
        saveNew(this.cuForm).then(res => {
          loading.close()
          this.$message.success('保存成功')
          this.closeThisPage()
        }).catch(() => {
          loading.close()
        })
      }
    },
    submit() {
      const flag = this.checkData()
      if (flag) {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.cuForm.billMarketDetailList = this.mediaDetailList
        beginNew(this.cuForm).then(res => {
          loading.close()
          this.$message.success('提交成功')
          this.closeThisPage()
        }).catch(() => {
          loading.close()
        })
      }
    },
    pass(opinion) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      pass({ id: this.cuForm.id, wf_check_opinion: opinion }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    returnBack(opinion) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return_back({ id: this.cuForm.id, wf_check_opinion: opinion }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    remove() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      remove({ id: this.cuForm.id }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    actualDelete() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      actual_delete({ id: this.cuForm.id }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    // 关闭此页面
    closeThisPage() {
      this.$store.dispatch('tagsView/closePage', this.$route.name)
    },
    // 获取跨行数
    getRowSpan(item) {
      let count = 0
      item.arr.forEach(tmp => {
        count += tmp.arr.length
      })
      return count
    },
    // 自由资源添加
    selfMediaAdd() {
      this.mediaDetailList.push({
        media_type_id: null,
        media_type_spec_arr: [],
        media_type_spec_id: null,
        duration: null,
        contract_quantity: null,
        quantity: null,
        execute_time_start:null,
        execute_time_end:null,
        total_executed_quantity: null,
        price: null,
        amount: null,
        is_market: 0,
        add_type:0
      })
    },
    /**
     * 自由资源删除
     * @param index
     */
    selfMediaDeleteByIndex(index) {
      this.mediaDetailList.splice(index, 1)
    },
  }
}
</script>

<style scoped>
.title {
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}

.header {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.content {
  margin-top: 20px;
}

.fill_date {
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 25px;
}

.mailTable {
  width: 98%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.photoRequirementTable tr td {
  line-height: 20px;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
}

.tip {
  color: red;
  width: 200px;
}

.table-herder {
  background-color: #F5F7FA;
  font-weight: bold;
}

.tip_td {
  padding: 0 20px !important;
  background-color: #F5F7FA;
  font-weight: bold;
  width: 200px;
}

/deep/ .content .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-form-item_inline-block {
  display: inline-block;
  margin: 0 1px 0 1px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-radio__input.is-disabled + span.el-radio__label {
  color: black;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #409EFF;
  background: #409EFF
}

/deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #FFF;
}
</style>
